<template>
    <a-space direction="vertical" :style="{ width: '100%' }">
      <a-upload
        :fileList="file ? [file] : []"
        :show-file-list="false"
        :custom-request="customRequest"
      >
        <template #upload-button>
          <div
            :class="`arco-upload-list-item${
              file && file.status === 'error'
                ? ' arco-upload-list-item-error'
                : ''
            }`"
          >
            <div
              class="arco-upload-list-picture custom-upload-avatar"
              v-if="file && file.url"
            >
              <img :src="file.url" />
              <div class="arco-upload-list-picture-mask">
                <IconEdit />
              </div>
              <a-progress
                v-if="file.status === 'uploading' && file.percent < 100"
                :percent="file.percent"
                type="circle"
                size="mini"
                :style="{
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translateX(-50%) translateY(-50%)',
                }"
              />
            </div>
            <div class="arco-upload-picture-card" v-else>
              <div class="arco-upload-picture-card-text">
                <IconPlus />
                <div style="margin-top: 10px; font-weight: 600">上传</div>
              </div>
            </div>
          </div>
        </template>
      </a-upload>
    </a-space>
  </template>
  
  <script setup lang="ts">
  import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
  import { ref, withDefaults, defineProps } from "vue";
  import { uploadFileUsingPost } from "@/api/fileController";
  import { Message } from "@arco-design/web-vue";
  
  /**
   * 定义组件属性类型
   */
  interface Props {
    biz: string;
    onChange?: (url: string) => void;
    value?: string;
  }
  
  /**
   * 给组件指定初始值
   */
  const props = withDefaults(defineProps<Props>(), {
    value: () => "",
  });
  
  const file = ref();
  if (props.value) {
    file.value = {
      url: props.value,
      percent: 100,
      status: "done",
    };
  }
  
  // 自定义请求
  const customRequest = async (option: any) => {
    const { onError, onSuccess, fileItem } = option;
  
    const res = await uploadFileUsingPost({ biz: props.biz }, {}, fileItem.file);
    if (res.data.code === 0 && res.data.data) {
      const url = res.data.data;
      file.value = {
        name: fileItem.name,
        file: fileItem.file,
        url,
      };
      props.onChange?.(url);
      onSuccess();
      console.log(file.value);
    } else {
      Message.error("上传失败，" + res.data.message || "");
      onError(new Error(res.data.message));
    }
  };
  </script>
  